<template>
<div id="app">
  <el-card style="width: 500px;margin: auto" class="card">
  <div class="t1">
    <span>预约挂号</span>
  </div>
  <el-form :model="form" label-width="130px" size="small">
    <el-form-item  label="地区">
      <el-select clearable placeholder="请选择" v-model="province" @change="findCity($event)">
        <el-option v-for="item in provinces" :key="item.id" :label="item.name" :value="item.id"></el-option>
      </el-select><br/>
      <el-select clearable placeholder="请选择" style="margin-top: 20px" v-model="city" @change="findHos($event)">
        <el-option v-for="item in cities" :key="item.id" :label="item.city" :value="item.id"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="医院">
      <el-select clearable placeholder="请选择" v-model="form.hosId" @change="findDep($event)">
        <el-option v-for="item in hospitals" :key="item.id" :label="item.name" :value="item.id"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="科室">
      <el-select clearable placeholder="请选择" v-model="form.depId">
        <el-option v-for="item in departments" :key="item.id" :label="item.name" :value="item.id"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button >取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </el-form-item>
  </el-form>
    </el-card>
</div>
</template>

<script>
export default {
  name: "FastOrder",
  data() {
    return {
      form: {},
      provinces: {},
      cities: {},
      hospitals: {},
      departments: {},
      province: "",
      city: ""
    }
  },
  created() {
    this.request.get("/province/list").then(res => {
      //console.log(res)
      this.provinces = res
    })
  },
  methods: {
    findCity(val){
      //console.log(val)
      this.request.post("/area/findCity?id=" + val).then(res => {
       //console.log(res)
        this.cities = res
      })
    },
    findHos(val){
      //console.log(val)
      this.request.post("/hospital/findHos?id=" + val).then(res => {
        //console.log(res)
        this.hospitals = res
      })
    },
    findDep(val){
      //console.log(val)
      this.request.post("/department/findDep?id=" + val).then(res => {
        //console.log(res)
        this.departments = res
      })
    },
    save(){
      console.log(this.form)
      this.$router.push({
        path: '/front/physician',
        query:{
          hosId:this.form.hosId,
          depId: this.form.depId,
        }
      })
    }
  }
}
</script>

<style scoped>
.t1{
  font-size: 20px;
  color: #409EFF;
  margin-top: 10px;
  margin-bottom: 10px;
  font-style:italic;
  text-decoration: underline;
  text-align: center
}
#app{
  padding-top: 20px;
  display:flex;
  justify-content: center;
  align-items: center;
  height: 600px;
}
</style>
